<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    max-height="600"
    title="品牌部责任人变更"
    width="40%"
    :close-on-click-modal="false"
  >
    <Form ref="ruleFormRef" label-width="120px" :model="createData" :rules="rules">
      <FormItem label="工单名称" prop="order_name">
        <Input v-model="createData.order_name" disabled></Input>
      </FormItem>
      <FormItem label="品牌部责任人" placeholder="请选择品牌部责任人" prop="brand_worker_id">
        <Select v-model="createData.brand_worker_id">
          <Option v-for="item in personOp" :key="item.user_id" :label="item.user_name" :value="item.user_id"></Option>
        </Select>
      </FormItem>
      <FormItem label="变更原因" prop="change_reason">
        <Input type="textarea" v-model="createData.change_reason"></Input>
      </FormItem>
    </Form>
    <template #footer>
      <Button type="primary" @click="submitClick"> 确定 </Button>
      <Button type="primary" @click="boxVisibility = false"> 取消 </Button>
    </template>
  </DialogBox>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Button, DialogBox, Form, FormItem, Input, Option, Select, Modal } from '@opentiny/vue'
import { getUserList, getRetouchOrder } from '@/request/api'
const  props = defineProps({
  basicGridRef: Object
})
const boxVisibility = ref(false)
const createData = ref({
  order_name: '',
  brand_worker_id: '',
  change_reason: ''
})
const ruleFormRef = ref()
const personOp = ref([])
const curRow = ref({})
const rules = ref(
  {
    order_name: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    brand_worker_id: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    change_reason: [
      { required: true, message: '必填', trigger: 'change' },
    ]
  }
)
const open = (row) => {
  curRow.value = row 
  boxVisibility.value = true
  createData.value.order_name = row.order_name
  createData.value.brand_worker_id = row.brand_worker_id
}
const getOptions = () => {
  const depart_id = 663835800
  getUserList(depart_id).then(res => {
    if (res?.data?.ret === 0) {
      personOp.value = res.data.result
    }
  })
}

const submitClick = () => {
  ruleFormRef.value.validate(val => {
    if (val) {
      const formData = new FormData()
      formData.append('flag', 1)
      formData.append('order_id', curRow.value.order_id)
      formData.append('brand_worker_id', createData.value.brand_worker_id)
      formData.append('change_reason', createData.value.change_reason)
      getRetouchOrder(formData, 'put').then(res => {
        if (res?.data?.ret === 0) {
          props.basicGridRef.handleFetch()
          boxVisibility.value = false
          Modal.message('品牌部责任人变更成功')
        } else {
          Modal.message({ message: res.data.msg, status: 'error' })
        }
      })
    }
  })
}
onMounted(() => {
  getOptions()
})
defineExpose({
  open
})
</script>